<template>
  <DaprPlusTable
    :table-title="$t('fsb.softwares.qrcodeOrder.list')"
    :entity="entity"
    :grid-options="gridOptions"
    :form-options="formOptions"
    :query-api="crudApi.getPage"
    :delete-api="crudApi.delete"
    @update:grid-api="onGridApiUpdate"
  />
</template>

<script lang="ts" setup>
import type { ExtendedVxeGridApi, VxeGridProps } from '#/adapter/vxe-table';
import type { VbenFormProps } from '#/adapter/form';
import { DaprPlusTable } from '#/components/daprplus';
import { createCrudApi } from '#/api/daprplus';
import {
  createBooleanColumn,
  type IOutDto,
  type EntityInfo,
} from '#/utils/daprplus';
import { $t } from '#/locales';

const baseUrl = '/softwares/api/qrcodeorder';
const crudApi = createCrudApi<never, QrCodeOrderOutDto>(baseUrl);

const entity: EntityInfo = {
  code: 'QrCodeOrder',
  display: $t('fsb.softwares.qrcodeOrder.title'),
};

// 配置搜索表单
const formOptions: VbenFormProps = {
  collapsed: false,
  schema: [
    {
      component: 'Input',
      label: '支付宝/微信昵称',
      fieldName: 'qrNickName',
    },
    {
      component: 'Input',
      label: '用户名',
      fieldName: 'userName',
    },
    {
      component: 'VbenSelect',
      label: '支付方式',
      fieldName: 'codeType',
      componentProps: {
        options: [
          { label: '支付宝', value: 0 },
          { label: '微信', value: 1 },
        ],
      },
    },
    {
      component: 'VbenSelect',
      label: '充值状态',
      fieldName: 'isPaid',
      componentProps: {
        options: [
          { label: '已充值', value: true },
          { label: '未充值', value: false },
        ],
      },
    },
    {
      component: 'VbenSelect',
      label: '锁定状态',
      fieldName: 'isLocked',
      componentProps: {
        options: [
          { label: '已锁定', value: true },
          { label: '未锁定', value: false },
        ],
      },
    },
  ],
  showCollapseButton: true,
  submitOnChange: true,
};

// 扩展配置
const gridOptions: VxeGridProps<QrCodeOrderOutDto> = {
  columns: [
    { type: 'checkbox', width: 40 },
    {
      field: 'id',
      title: '编号',
      sortable: true,
      width: 130,
    },
    {
      field: 'qrNickName',
      title: '支付宝/微信昵称',
      sortable: true,
      align: 'left',
      minWidth: 150,
    },
    {
      field: 'value',
      title: '充值金额',
      align: 'right',
      width: 100,
      formatter: ({ cellValue }) => cellValue?.toFixed(2),
    },
    {
      field: 'codeType',
      title: '支付方式',
      width: 90,
      formatter: ({ cellValue }) => (cellValue === 0 ? '支付宝' : '微信'),
    },
    createBooleanColumn('isPaid', '充值状态', { width: 120 }),
    {
      field: 'rechargeTime',
      title: '充值时间',
      formatter: 'formatDateTime',
      width: 150,
    },
    createBooleanColumn('isLocked', '锁定', { width: 85 }),
    {
      field: 'userId',
      title: '用户ID',
      width: 90,
    },
    {
      field: 'userName',
      title: '用户名',
      sortable: true,
      align: 'left',
      minWidth: 150,
    },
    {
      field: 'createdTime',
      title: '创建时间',
      formatter: 'formatDateTime',
      width: 150,
    },
  ],
};

let gridApi: ExtendedVxeGridApi;

function onGridApiUpdate(api: ExtendedVxeGridApi) {
  gridApi = api;
}

export interface QrCodeOrderOutDto extends IOutDto {
  /** 支付宝/微信昵称 */
  qrNickName: string;
  /** 充值金额 */
  value: number;
  /** 二维码方式：0-支付宝，1-微信 */
  codeType: number;
  /** 是否已充值 */
  isPaid: boolean;
  /** 充值时间 */
  rechargeTime?: string;
  /** 是否锁定 */
  isLocked: boolean;
  /** 用户ID */
  userId: number;
  /** 用户名 */
  userName: string;
  /** 创建时间 */
  createdTime: string;
}
</script>

<style scoped></style>
